<!-- 
  如何在组件中获取仓库的 getter 数据
      1. this.$store.getters.xxx

      2. 使用 computed 

      3. mapGetters 辅助函数

 -->

<script>
import Hello from "./components/Hello.vue";
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  components: {
    Hello,
  },

  data() {
    return {
      localCount: 100,
    };
  },

  computed: {
    ...mapState(["msg", "count"]),
    ...mapGetters(["msgLen", "reverseMsg", "reverseMsgReverse"]),

    localCountPlus() {
      return this.localCount + 1;
    },

    // msgLen() {
    //   return this.$store.getters.msgLen;
    // },

    // reverseMsg() {
    //   return this.$store.getters.reverseMsg;
    // },
  },

  methods: {
    ...mapMutations(["changeMsg"]),
  },
};
</script>

<template>
  <div>
    <h1>Vuex基础</h1>
    <button @click="changeMsg({ name: '张三' })">{{ msg }}</button>
    <button>{{ count }}</button>

    <button>msgLen: {{ msgLen }}</button>
    <button>reverseMsg:{{ reverseMsg }} {{ reverseMsgReverse }}</button>

    <hr />

    <Hello />
  </div>
</template>
